$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .section1 {
    display: flex;
    justify-content: space-between;
    margin-top: 6vw;

    .l {
      width: 34%;
      background: #F3F3F3;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 8%;

      .t {
        color: #020626;
        font-size: $fontSize_48;
        font-family: 'SourceHanSansCN-Medium';
      }

      .des {
        color: #333;
        font-size: $fontSize_18;
        margin: 1vw 0 6vw 0;
      }

      .btns {
        display: flex;

        a {
          display: block;
          width: fit-content;
          border: 1px solid #000;
          padding: 0.4vw 4vw;
          color: #000;
          font-size: $fontSize_16;
          transition: all 600ms;

          &:hover {
            background-color: #1B2170;
            color: white;
            border-color: #1B2170;
          }
        }

        .free {
          background-color: #000;
          color: white;
          margin-right: 1vw;
        }
      }
    }

    .r {
      width: 50%;
      overflow: hidden;

      img {
        width: 100%;
        display: block;
        object-fit: cover;
        transition: all 600ms;
      }

      &:hover {
        img {
          transform: scale(1.05);
        }
      }
    }
  }

  .section2 {
    border-radius: 25/$f+vw;
    background: linear-gradient(169deg, #1B2170 17.72%, #02072B 59.23%);
    padding: 3vw 0;

    .item {
      width: 60vw;
      margin: 0 auto;
      border-top: 1px solid rgba(255, 255, 255, .35);
      display: flex;
      justify-content: space-around;
      padding: 2vw 0;

      .l {
        width: 35%;
        color: #FFF;
        font-size: $fontSize_24;
        font-family: 'SourceHanSansCN-Medium';
        text-decoration: underline;
      }

      .r {
        width: 50%;

        .des {
          color: #FFF;
          font-size: $fontSize_18;
          text-align: justify;
        }

        a {
          border-radius: 2px;
          background: #FFF;
          padding: 0.5vw 2vw;
          margin-top: 1.5vw;
          display: block;
          color: #020626;
          font-size: $fontSize_16;
          transition: all 600ms;
          width: fit-content;
          &:hover{
            background-color: #000;
            color:white;
          }
        }
      }
    }
  }

  .section3 {
    margin: 6vw 8vw;

    .d1 {
      display: flex;
      justify-content: space-between;
      align-items: center;

      p {
        color: #000;
        font-size: $fontSize_48;
        font-family: 'SourceHanSansCN-Medium';
      }

      .btns {
        display: flex;
        align-items: center;

        .prev,
        .next {
          margin-left: 1vw;

          svg {
            display: block;
            cursor: pointer;
            width: 44/$f+vw;

            circle,
            path {
              transition: all 600ms;
            }

            &:hover {
              circle {
                fill: #1B2170;
                stroke: white;
              }

              path {
                stroke: white;
              }
            }
          }
        }
      }
    }

    .allContent {
      width: 100%;
      margin-top: 2vw;

      .swiper-container {
        width: 100%;

        .info {
          border-radius: 8px 27/$f+vw  8px 8px;
          border: 1px solid #1B2170;
          background: #FFF;
          box-shadow: 0px 4px 20px 0px rgba(27, 33, 112, 0.12);
          min-height: 160/$f+vw;
          padding: 1.5vw;
          width: calc(98% - 3vw);

          .st {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .num {
              color: #000;
              font-size: $fontSize_28;
              font-family: 'Montserrat-Regular.otf';
            }

            .icon {
              img {
                width: 24/$f+vw;
                display: block;
              }
            }
          }

          .tag {
            color: #000;
            font-size: $fontSize_18;
            font-weight: 300;
            margin-top: 3vw;
          }
        }
      }
    }
  }

  .section4 {
    background-color: #F6F6F6;
    padding: 8vw 10vw;

    .d1 {
      display: flex;
      justify-content: space-between;
      align-items: center;

      p {
        color: #000;
        font-size: $fontSize_54;
      }

      .btns {
        display: flex;
        align-items: center;

        .prev,
        .next {
          margin-left: 1vw;

          svg {
            display: block;
            cursor: pointer;
            width: 44/$f+vw;

            circle,
            path {
              transition: all 600ms;
            }

            &:hover {
              circle {
                fill: #1B2170;
                stroke: white;
              }

              path {
                stroke: white;
              }
            }
          }
        }
      }
    }

    .allNews {
      margin-top: 2vw;

      .swiper-container {
        width: 100%;

        a {
          display: block;
          background-color: white;

          .pic {
            overflow: hidden;

            img {
              width: 100%;
              display: block;
              object-fit: cover;
              transition: all 600ms;
            }
          }

          .des {
            padding: 1.5vw;

            .t {
              color: #000;
              font-size: $fontSize_24;
              font-family: 'SourceHanSansCN-Medium';
            }

            .more {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 5vw;

              p {
                color: #1B2170;
                font-size: $fontSize_18;
              }

              .more {
                svg {
                  display: block;
                  width: 34/$f+vw;
                }
              }
            }
          }

          &:hover {
            .pic {
              img {
                transform: scale(1.05);
              }
            }

            .t {
              color: #1B2170;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .section1{
      margin-top: 0;
      flex-direction: column;
      .l{
        width: 90%;
        padding: 30px 5%;
        .t{
          font-size: 24px;
        }
        .des{
          font-size: 14px;
          margin: 15px 0 40px 0;
        }
        .btns{
          a{
            padding: 5px 25px;
            font-size: 14px;
          }
          .free{
            margin-right:15px;
          }
        }
      }
      .r{
        width: 100%;
      }
    }
    .section2{
      padding: 30px 0;
      .item{
        width: 90%;
        padding: 20px 0;
        flex-direction: column;
        .l{
          font-size: 18px;
          width: 100%;
        }
        .r{
          width: 100%;
          margin-top: 10px;
          .des{
            font-size: 16px;
          }
          a{
            font-size: 14px;
            padding: 5px 15px;
            margin-top: 15px;
          }
        }
      }
    }
    .section3{
      margin: 30px 5%;
      .d1{
        p{
          font-size: 20px;
        }
        .btns{
          .prev,.next{
            margin-left: 10px;
            svg{
              width: 25px;
            }
          }
        }
      }
      .allContent{
        margin-top: 0;
        .swiper-container{
          .info{
            padding: 15px 5%;
            width:85%;
            margin: 10px auto;
            box-shadow: 0 0 10px rgba(27,33,112,0.12);
            min-height: 120px;
            .st{
              .num{
                font-size: 18px;
              }
              .icon{
                img{
                  width: 20px;
                }
              }
            }
            .tag{
              font-size: 16px;
            }
          }
        }
      }
    }
    .section4{
      padding: 30px 5%;
      .d1{
        p{
          font-size: 24px;
        }
        .btns{
          .prev,.next{
            margin-left: 10px;
            svg{
              width: 25px;
            }
          }
        }
      }
      .allNews{
        margin-top: 20px;
       .swiper-container{
        a{
          .des{
            padding: 15px;
            .t{
              font-size: 18px;
            }
            .more{
              margin-top: 30px;
              p{
                font-size: 16px;
              }
            }
          }
        }
       }
      }
    }
  }
}